<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>已完成</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/img/favicon.ico}"/>

    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css"
          th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
    <script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}" crossorigin="anonymous"></script>
    <style>
        body {
            padding: 10px 5px;
        }

        .form-flex {
            display: flex;
            margin-top: 5px;
        }
        .form-flex > div {
            margin: 0px 2px;
        }

        .paging {
            position: fixed;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
        }

        .completed_collect_item {
            width: 100%;
            margin: 15px 0px;
            background: #ccc;
        }

        #searchHistoryCollectButton {
            max-width: 120px;
            margin-left: 5px;
        }
        .page_view {
            height: 31px;
            line-height: 31px;
            margin: 0px 10px;
        }
        #download_collect {
            display: inline;
        }
        #endedCollectListBox {
            margin-bottom: 80px;
        }
    </style>
</head>
<body>
<!-- 在 body 中添加搜索框和按钮 -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <form class="form-flex">
                <div class="form-group flex-grow-1">
                    <input class="form-control" type="text" placeholder="请输入搜索关键词..." name="keyword" />
                </div>
                <div class="form-group">
                    <select class="form-control" name="type" >
                        <option value="1" selected>已完成</option>
                        <option value="-1">未完成</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-outline-primary" id="searchHistoryCollectButton">搜索历史</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="historyCollectList" class="container">
    <div class="row row-cols-3" id="endedCollectListBox">
    </div>
</div>

<ul class="pagination justify-content-center paging" >
    <li class="page-item">
        <button class="page-link" id="pre_page">上一页</button>
    </li>
    <div class="page-item page_view">
        <input value="1" name="custom_page" style="width: 30px" > / <span id="maxPage">0</span>
    </div>
    <li class="page-item ">
        <button class="page-link" href="#" id="custom_page">跳转</button>
    </li>
    <li class="page-item">
        <button class="page-link" id="next_page" >下一页</button>
    </li>
</ul>

<div class="modal fade" id="seeCollectModal" data-backdrop="static" data-keyboard="false" tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">收集活动详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span style="font-weight: 600">主题：</span><span id="collect_title" ></span>
            </div>
            <div class="modal-body">
                <span style="font-weight: 600">描述：</span><span id="collect_describe"></span>
            </div>
            <div class="modal-body">
                <span style="font-weight: 600">状态：</span><span id="collect_state"></span>
                <a href="#" id="download_collect" collect_id="" >下载提交的收集</a>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="closeCollectContentSee" >关闭</button>
            </div>
        </div>
    </div>

</div>
<script type="module">
    import {POST, GET, POST_FORM} from "/js/request.js";
    import {formatDate} from '/js/formatDate.js'
    let pageVars = {
        currentPage: 1,
        pageSize: 6,
        total: 0,
        keyword: '',
        type: 1
    }
    let list = []

    function refreshPageParamToView() {
        $("#maxPage").text(getMaxPage())
        $("input[name='custom_page']").val(pageVars.currentPage)
        $("select[name='type']").val(pageVars.type)
    }
    function listShowToView(list = list) {
        // 先将显示到视图
        refreshPageParamToView()
        let endedCollectListBox = $("#endedCollectListBox");
        list.forEach(collect=>{
            endedCollectListBox.append(`
                    <div class="col">
                        <div class="card w-30 completed_collect_item">
                            <div class="card-body">
                                <h5 class="card-title">${collect.title}</h5>
                                <p class="card-text">${formatDate(new Date(collect.startTime),'yyyy-MM-dd')} 到 ${formatDate(new Date(collect.endTime),'yyyy-MM-dd')}</p>
                                <button class="btn btn-primary" data-toggle="modal" data-target="#seeCollectModal" id="seeCollectButton" collect_id="${collect.id}">查看</button> <span>${collect.isCompleted?'':'未提交'}</span>
                            </div>
                        </div>
                    </div>
                `)
        })
    }

    refreshPageData()
    function refreshPageData() {
        // 不管是否有数据，置空视图的数据
        $("#endedCollectListBox").html('')
        GET("/collect/getHistoryCollectList",pageVars).then(result=>{
            console.log("返回的页数据：",result)
            if (result.success) {
                list = result.data.list
                pageVars.total = result.data.total;
                listShowToView(result.data.list);
            }
        })
    }
    function getMaxPage() {
        return Math.ceil( pageVars.total / pageVars.pageSize )
    }
    $("#next_page").click(function () {
        if (pageVars.currentPage + 1 > getMaxPage()) {
            return;
        }
        pageVars.currentPage++
        refreshPageData();
    })
    $("#pre_page").click(function () {
        if (pageVars.currentPage - 1 < 1 ) {
            return;
        }
        pageVars.currentPage--
        refreshPageData();
    })
    $("#custom_page").click(function () {
        let customPage = $("input[name='custom_page']").val()
        if ( customPage < 1 || customPage > getMaxPage() ) {
            return
        }
        pageVars.currentPage = customPage
        refreshPageData();

    })
    $("select[name='type']").change(function() {
        pageVars.type = $(this).val();
        pageVars.currentPage = 1
        refreshPageData();
    });
    // 点击搜索
    $("#searchHistoryCollectButton").click(function (event) {
        event.preventDefault();
        pageVars.keyword = $("input[name='keyword']").val();
        // 将当前页置0
        pageVars.currentPage = 0
        refreshPageData();
    })
    // 点击了查看
    $("#endedCollectListBox").on("click","#seeCollectButton",function () {
        // 获取当前要显示的collect信息
        let collectId = $(this).attr("collect_id")
        let collectObj = collectIdToCollectObj(collectId)
        if ( collectId == null ) return;
        console.log("渲染数据：",collectId,collectObj)
        $("#collect_title").html(collectObj.title)
        $("#collect_describe").html(collectObj.describe)
        $("#collect_state").text(collectObj.isCompleted?'已提交':'未提交')
        if (collectObj.isCompleted) {
            // 显示下载链接
            $("#download_collect").css("display","inline")
        }else {
            // 隐藏下载链接
            $("#download_collect").css("display","none")
        }
        $("#download_collect").attr("collect_id",collectObj.id)
    })
    // 点击下载提交的作品文件
    $("#download_collect").click(function (event) {
        event.preventDefault();
        let collectId = $(this).attr("collect_id")
        GET("/collect/download?collectId="+collectId).then(result=>{
            if (result.success) {
                window.open(result.data)
            }else  {
                alert("下载失败！"+result.message)
            }
        })
    })
    function collectIdToCollectObj(collectId) {
        for (let collect of list) {
            if (collect.id == collectId) return collect;
        }
        return null;
    }

    $("#closeCollectContentSee").click(function () {
        console.log("点击关闭了")
        $("#seeCollectModal").modal('hide')
    })




</script>
</body>
</html>